<template>
  <a-menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    @click="handleClick"
    style="border-right: none"
  >
    <a-sub-menu key="sub1" @titleClick="titleClick(1)">
      <template #icon>
        <div class="left">
          <svg-icon icon-class="title-left" />
        </div>
      </template>
      <template #title>值班表管理</template>
    </a-sub-menu>
    <a-sub-menu key="sub2" @titleClick="titleClick(2)">
      <template #icon>
        <div class="left">
          <svg-icon icon-class="title-left" />
        </div>
      </template>
      <template #title>值班记录管理</template>
    </a-sub-menu>
  </a-menu>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import type { MenuProps } from "ant-design-vue";
import router from "@/router";
import LocalCache from "@/utils/cache";
export default defineComponent({
  setup() {
    const key = LocalCache.getSession("key");
    const showKey = key || "";
    const selectedKeys = ref<string[]>([showKey]);
    const openKeys = ref<string[]>(["sub1"]);
    const handleClick: MenuProps["onClick"] = (e) => {
      console.log(e);
      LocalCache.setSession("key", e.key);
    };
    const titleClick = (key: number) => {
      LocalCache.setSession("key", key);
      if (key === 1) {
        router.push("/rota/management");
      } else if (key === 2) {
        router.push("/rota/record");
      }
    };
    watch(openKeys, (val) => {
      console.log("openKeys", val);
    });
    return {
      selectedKeys,
      openKeys,
      handleClick,
      titleClick,
    };
  },
});
</script>
<style lang="less" scoped>
/deep/ .ant-menu-submenu-selected {
  background: none !important;
  .left {
    background: #3e77fa !important;
    svg {
      fill: #ffffff !important;
    }
  }
}
/deep/ .ant-menu-inline .ant-menu-submenu-title {
  width: auto;
}
/deep/ .ant-menu-inline .ant-menu-item {
  width: auto;
}
/deep/ .ant-menu-submenu-selected .ant-menu-submenu-title {
  background: rgba(66, 132, 242, 0.1);
  border-radius: 10px;
  .right {
    fill: #3e77fa;
  }
}
/deep/ .ant-menu-sub.ant-menu-inline {
  background: #fff;
}
/deep/ .ant-menu-inline .ant-menu-item:not(:last-child) {
  margin-bottom: 0;
}
/deep/ .ant-menu-submenu-title {
  padding: 8px 31px;
  margin: 0;
  padding-left: 40px !important;
  height: 64px !important;
  .left svg {
    fill: #7c87a6;
  }
  .right {
    fill: #a4a4a4;
  }
  &:hover .ant-menu-title-content {
    color: #3e77fa;
  }
  &:hover .left svg {
    fill: #3e77fa;
  }
  &:hover .right {
    fill: #3e77fa;
  }
  /deep/ .ant-menu-title-content {
    margin-left: 0;
    font-size: 16px;
    line-height: 48px;
    letter-spacing: 1px;
  }
  .left {
    margin-right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    margin-right: 67px;
  }
  .right {
    width: 12px;
    height: 7px;
  }
}
/deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: none;
}
/deep/ .ant-menu-inline .ant-menu-item {
  margin: 0;
  height: 56px;
  padding-left: 86px !important;
}
/deep/ .ant-menu-inline .ant-menu-item::after {
  border-right: none;
}
/deep/ .ant-menu-inline {
  border-right: none;
}
/deep/ .ant-menu-item {
  /deep/ .ant-menu-title-content {
    font-size: 16px;
    line-height: 48px;
    letter-spacing: 1px;
  }
}
/deep/ .ant-menu-item-selected {
  color: #3e77fa;
}
</style>
